import React, { Component } from 'react'
import {nanoid} from 'nanoid'

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'

import './App.css'

export default class App extends Component {
  state={todos:[
    {id:1, name:'睡觉', done:false},
    {id:2, name:'吃饭', done:false},
    {id:3, name:'干活', done:false},
  ]};

  acceptTodo=(todo)=>{
    const {todos} = this.state
    this.setState({todos:[...todos, {id:nanoid(), name: todo, done:false}]})
  }

  acceptChecked=(id, done)=>{
    let {todos} = this.state
    todos = todos.map(e=> {
      if(e.id===id) return {...e, done}
      else return e
    });
    this.setState({todos})
  }

  remove=(id)=>{
    let {todos} = this.state
    todos = todos.filter(e=>e.id!==id)
    this.setState({todos})
  }

  checkAll=(done)=>{
    let {todos} = this.state
    todos = todos.map(e=>{return {...e, done}})
    this.setState({todos})
  }

  clearDone=()=>{
    let {todos} = this.state
    todos = todos.filter(e=>!e.done)
    console.log(todos);
    this.setState({todos})
  }

  render() {
    const {todos} = this.state
    console.log(todos);

    return (
      <div className="wrap">
        <div className="container">
          <Header acceptTodo={this.acceptTodo} />
          <List todos={todos} acceptChecked={this.acceptChecked} remove={this.remove}/>
          <Footer todos={todos} checkAll={this.checkAll} clearDone={this.clearDone} />
      </div>
    </div>
    )
  }
}
